<!-- 发布动态 gpd  09点27分 -->
<template>
	<view class="addTrend">
		<!-- 动态主体 -->
		<view class="addTrend_body">
				<u-popup :show="show" mode="center">
			        <view>
			            <text>上传视频中...请稍后</text>
			        </view>
				</u-popup>
				<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					width="110"
					height="110"
					:maxCount="3"
					style="margin-left: 6rpx;"
				></u-upload>
				<u-upload
					:fileList="fileList2"
					@afterRead="afterRead"
					@delete="deletePic"
					name="2"
					multiple
					:maxCount="1"
					accept="video"
					width="110"
					height="110"
				>
				<image src="/static/视频.png"
					mode="widthFix" style="width: 80px;height: 80px;"></image>
				</u-upload>
				<view style="margin-top: 20px;">
					<textarea v-model="title" placeholder="填写标题会有更多赞哦~" style="width: 100%;height: 160px;"></textarea>
				</view>
				<view style="margin-top: 20px;">
					<textarea v-model="content" placeholder="展开说说,你写的文字我们都很喜欢:)" style="width: 100%;height: 160px;"></textarea>
				</view>
				<!-- <p style="font-size: 12px;margin-top: 20px;float: left;">宝贝与描述相符</p>
				<u-rate :count="descriptionCount" v-model="descriptionValue" style="margin-left:30px;float: left;margin-top: 20px;width: 220px;" ></u-rate>
				<p style="font-size: 12px;margin-top: 20px;float: left;">卖家的服务态度</p>
				<u-rate :count="serviceCount" v-model="serviceValue" style="margin-left:30px;float: left;margin-top: 20px;width: 220px;" ></u-rate>
				<p style="font-size: 12px;margin-top: 20px;float: left;">卖家发货的速度</p>
				<u-rate :count="deliveryCount" v-model="deliveryValue" style="margin-left:30px;float: left;margin-top: 20px;width: 220px;" ></u-rate>-->
				<u-button @click="publish()" vtype="primary" color="linear-gradient(to right, rgb(254,132,0), rgb(254,87,0))" shape="circle" text="发布" style="margin-top: 20px;"></u-button> 
			</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 动态内容
				content: '',
				// 动态标题
				title:'',
				// 存放图片的数组
				fileList1: [],
				// 存放视频的数组
				fileList2:[],
				// 描述默认评星数量
				descriptionCount: 5,
				// 绑定描述评星的值
				descriptionValue:'',
				// 服务默认评星数量
				serviceCount: 5,
				// 绑定服务评星的值
				serviceValue:'',
				// 发货默认评星数量
				deliveryCount:5,
				// 绑定发货评星的值
				deliveryValue:'',
				// 存放图片组id
				avatar:'',
				// 存放视频组id
				videoA:'',
				show:false,
				// 存放登录成功后的结果
				user:'',
				// 存放登录成功后的用户id
				userId:'',
				// 存放登录成功后的用户昵称
				nickName:'',
				// 存放登录成功后的图片路径和id
				avatarUrl:'',
				// 存放登录成功后的token
				token:'',
			}
		},
		methods:{
			// 新增图片
			async afterRead(event) {
				debugger
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 发布
			publish(){
				var list = []
				var code = ''
				var videoCode = ''
				
				list.push(this.fileList1)
				// 调用图片方法每个图片调用一次方法
				// 拼接返回图片id组
				this.fileList1.forEach(item=>{
					
					uni.uploadFile({
						url: 'http://127.0.0.1:8088/trends/uploadImageAndVideo',
						filePath: item.thumb,
						name:'file',
						success: (res) => {
							code = JSON.parse(res.data)
							console.log(code)
							if(this.avatar == ''){
								this.avatar = code.data-0
							}
							if(this.avatar!==code.data-0){
								this.avatar = this.avatar+","+code.data
							}
							console.log(this.avatar)
						}
					})
				})
				// 图片上传完后，分批上传视频
				// 拼接返回视频id组
				let array =[...this.fileList2]
				console.log(array)
				this.fileList2.forEach(item=>{
					console.log(item.tempFile)
					uni.uploadFile({
						url: 'http://127.0.0.1:8088/trends/uploadImageAndVideo',
						filePath : item.url,
						name:"file",
						success: (res) => {	
							videoCode = JSON.parse(res.data)
							this.videoA = videoCode.data-0
							console.log(this.videoA)
						}
					})
				})
				var _this = this
				setTimeout(function() {
					if (_this.fileList2.length!==0 && _this.videoA== ""){
						_this.show = true
					}
				}, 2000)
				
			},
			//新增用户发布的动态信息
			saveUserTrends(){
				this.$myRequest({
					url:'/trends/saveUserTrends',
					data:{
						pictureGroup:this.avatar,
						videoGroup:this.videoA,
						userId:this.userId,
						avatarUrl:this.avatarUrl,
						trendContent:this.content,
						userName:this.nickName,
						trendTitle:this.title
					},
					method:'POST',
					dataType:'json',
				}).then(res=>{
					// 发布成功以后清空上传的视频，图片组，内容，和存放图片，视频的数组
					this.avatar=""
					this.videoA=""
					this.content=""
					this.title=""
					this.fileList1=[]
					this.fileList2=[]
					uni.showToast({
						title: '发布成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2500
					})
					// 跳转动态页面
					uni.switchTab({
						url:'/pages/trend/TrendContent'
					})
				})
			},
		},
		watch:{
			videoA(newName, oldName){
				if(oldName !== newName){
					uni.showToast({
						title: '上传视频中成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
					})
					this.show = false
				}
				var _this =  this
				setTimeout(function() {
				  //如果用户不上传图片和视频只写文字动态时
				  if(_this.fileList1.length==0 && _this.fileList2.length==0 && _this.content!==''){
					//新增用户发布的动态信息
					_this.saveUserTrends()
				  }
				  // 或者用户上传图片不上传视频时
				  else if(_this.avatar!==''&& _this.fileList2.length==0 || _this.videoA!==''&& _this.fileList1.length==0){
					//新增用户发布的动态信息
					_this.saveUserTrends()
				  }
				  // 或者用户上传动态时
				  else if(_this.videoA!==''&& _this.avatar!==''&& _this.content!=="" || _this.videoA!==''&& _this.avatar!==''&& _this.content==""){
					//新增用户发布的动态信息
					_this.saveUserTrends()
				  }
				  // 用户内容，图片，视频都不上传时
				  else{
					alert("请输入要发布的内容")
				  }
				}, 500)
			}
		},
		onLoad() {
			this.user = wx.getStorageSync("user")
			this.token = wx.getStorageSync("token")
			this.userId = this.user.id
			this.nickName = this.user.nickName
			this.avatarUrl = this.user.avatarUrl
		}
	}
</script>

<style>
	.addTrend{
		width:100%;
		height:812px;
		background-color:white;
		overflow: hidden;
	}
	.addTrend_body{
		border-radius: 4%;
		width: 96%;
		height: 520px;
		background-color: white;
		margin-top: 20px;
		margin-left: 16px;
		
	}
	.addTrend_top{
		width: 100%;
		height: 70px;
	}
	.addTrend_orderImage{
		width: 50px;
		height: 50px;
		border-radius: 4%;
		margin-top: 10px;
		margin-left: 10px;
		float: left;
	}
</style>